<style scoped>
    .left-enter-active, .left-enter-active{
        transition: opacity .5s;
    }
    .left-enter, .left-leave{
        opacity: 0;
    }
</style>
<template>
    <div>
        <ul>
            <li style="display: inline-block" v-for="(item,index) in imgs" :key="index">
                <transition name="left">
                <img width="200px" height="200px" v-if="cIndex===index"
                    :src="item" />
                </transition>
            </li>           
        </ul>
      <button  v-for="(item,index) in imgs" :key="index+'ii'"
        @click="handleClick(index)"      
      >{{index}}</button>
    </div>
</template>
<script>
export default {
    mounted(){
        this.cIndex=this.currentIndex
    },
    methods:{
        handleClick(index){
            this.cIndex=index
        }
    },
    props:{
        currentIndex:{
            type:Number,
            default:0
        }
    },
    data(){
        return{
            cIndex:0,
            imgs:[
                '../../static/logo.png',
                '../../static/logo2.png',
                '../../static/logo.png',
                ]
        }
    }
}
</script>
